<!-- 不带分页的表格，只做展示用，默认不带高度。 -->
<template>
	<div class="mcTableIndex">
		<div class="mcTableList">
			<el-table
				:height="curHeight"
				:data="tableData"
				border
				style="width: 100%"
				ref="table"
				:row-style="{ height: '32px' }"
				:cell-style="{ padding: '0' }"
				@row-click="rowClick"
				highlight-current-row
			>
				<el-table-column label="序号" align="center" width="60" fixed>
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>

				<!-- 列头有合并的情况 -->
				<el-table-column
					:prop="item.prop"
					:label="item.label"
					:width="item.width ? item.width : 'auto'"
					:align="item.align ? item.align : 'center'"
					v-for="(item, index) in tableColumn"
					:key="index"
				>
					<template slot-scope="scope">
						<slot :name="scope.row[item.prop]" :params="scope.row">
							{{
								item.dictName
									? getDictValue(item.dictName, scope.row[item.prop])
									: scope.row[item.prop]
							}}
						</slot>
					</template>
					<div v-if="item.children && item.children.length > 0">
						<el-table-column
							:prop="child.prop"
							:label="child.label"
							:width="child.width ? child.width : 'auto'"
							:align="child.align ? child.align : 'center'"
							v-for="(child, cIndex) in item.children"
							:key="cIndex"
						>
							<template slot-scope="scope">
								<slot :name="scope.row[child.prop]" :params="scope.row">
									{{
										child.dictName
											? getDictValue(child.dictName, scope.row[child.prop])
											: scope.row[child.prop]
									}}
								</slot>
							</template>
						</el-table-column>
					</div>
				</el-table-column>
				<!-- 字段列展示 end -->

				<!-- 操作按钮集合 begin -->
				<el-table-column
					v-if="tableBtn && tableBtn.length > 0"
					fixed="right"
					:label="oprLable ? oprLable : '操作'"
					:width="btnListWidth ?? tableBtn.length * 45"
				>
					<template slot-scope="scope">
						<el-button
							v-if="tableBtn.includes('switch')"
							@click.native.prevent="switchChange(scope.$index, tableData)"
							type="text"
							size="small"
						>
							<el-switch
								v-model="scope.row.readonly"
								active-color="#ff4949"
								inactive-color="#13ce66"
							>
								>
							</el-switch>
						</el-button>
					</template>
				</el-table-column>
				<!-- 操作按钮集合 end -->
			</el-table>
		</div>
	</div>
</template>

<script>
	import { Utility } from "@/libs/utility"
	export default {
		props: {
			oprLable: {
				type: String,
			},
			/** 数据源：这里不确定字段，只要是数组就可以 */
			dataSource: {
				/** 这里不确定字段，只要是数组就可以 */
				type: Array,
				required: true,
			},
			/** 自定义列 */
			tableColumns: {
				/** 格式： [{prop:"",label:"",width:"",children:[{prop:"",label:"",width:""]}] 其中宽度可以不写 */
				type: Array,
				required: true,
			},
			/** 高度 */
			height: {
				type: Number,
			},
			/** 操作按钮集合 */
			btnList: {
				/** 格式：['edit','view','delete','lookSMJ'] ，可以给空 */
				type: Array,
			},
			btnListWidth: {
				type: String,
				require: false,
			},
		},
		computed: {
			tableBtn() {
				return this.btnList
			},
			tableData() {
				return this.dataSource
			},
			tableColumn() {
				return this.tableColumns
			},
			curHeight() {
				return this.height ? this.height : "200px"
			},
		},
		data() {
			return {
				multipleSelection: [],
			}
		},
		methods: {
			switchChange(i, d) {
				this.tableData[i].readonly = d[i].readonly
				const data = {
					index: i,
					data: d[i],
				}
				this.$emit("switchChange", data)
			},
			rowClick(r) {
				this.$emit("rowClick", r)
			},
			getDictValue(dictType, dictValue) {
				let finishValue = dictValue
				const list = Utility.getDictList(dictType)
				if (
					list &&
					list.length > 0 &&
					typeof dictValue != "undefined" &&
					dictValue != null
				) {
					const item = list.find((t) => t.value == dictValue)
					if (typeof item != "undefined") {
						finishValue = item.label
					}
				}
				return finishValue
			},
		},
		mounted() {},
	}
</script>

<style scoped>
	.mcTableIndex {
		margin-top: 10px;
	}

	.mcTableIndex .mcTableList {
		overflow: hidden;
	}
</style>
